<template>
    <div class="main">
        <div class="main_first">
            <div class="main_first">
                <!-- <div class="main_first__img">
                    
                </div> -->
                <video style=" object-fit: fill;width:100%;height:100%" width="100%" height="100%" controls loop poster="../../../assets/poster.jpg">
                    <source  src="../../../assets/movie.mp4" type="video/mp4" >
                </video>
            </div>
            <div class="Popup">
                 <div class="main_first_Popup__img"> 
                  </div>
                  <el-button @click="fshow()">{{this.content1}}</el-button>
                  <div class="main_first_Popup__tuoxian">
                      <el-button @click="navtojika">我的卡集</el-button>
                  </div>
        </div>
            <!-- 点击集卡弹出框 -->
            <div class="jikaalert">
                <transition name="el-fade-in-linear">
                    <div v-show="show" class="transition-box"> 
                        <h1>{{this.content}}</h1>
                        <el-image :src="src">
                            <div slot="placeholder" class="image-slot">
                            </div>
                        </el-image>
                    </div>
                </transition>
               
            </div>

            </div>
        <div class="main_second"></div>
        <div class="main_third">
            <div class="crile crile__1"></div>
            <div class="crile crile__2"></div>
            <div class="crile crile__3"></div>
            <div class="crile crile__4"></div>
            <div class="crile crile__5"></div>
            <div class="crile crile__6"></div>
            <div class="crile crile__7"></div>
            <div class="crile crile__8"></div>
            <div class="crile crile__9"></div>
            <div class="crile crile__10"></div>
            <div class="crile crile__11"></div>
            <div class="crile crile__12"></div>
            <div class="character"></div>
        </div>
     
        <div class="main_four">
            <div class="line"></div>
            <div class="main_four__nav"><span>音视频热点</span></div>
            <div class="main_four__main">
                <div class="main_four__main-rotation">
                    <div class="rotation">
                         <div class="block">
                            <el-carousel height="300px">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <h3 class="small">{{ item }}</h3>
                            </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </div>
                <div class="main_four__main-detail">
                    <div class="btn">
                        <div class="btn__music">
                            <el-button >音乐</el-button>
                        </div>
                        <div class="btn__vedio">
                            <el-button>视频</el-button>      
                        </div>
                    </div>
                      <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>    
                </div>
            </div>
        </div>
       
    </div> 
</template>
<script>
export default {
    data(){
        return {
            show: false,
            content:'恭喜你抽中了',
            content1:'点击集卡',
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'

        }
    },
    methods:{
          fshow :function(){
              this.show=!this.show;
              if(!this.show){
                  this.content="今天您已经抽过啦！！！！"
                  this.content1="点击集卡";
              }else{
                  this.content1="点击返回";
              }
          },
          navtojika:function(){
              this.$router.push("/cardCollecting")
          }  
    }
}
</script>

<style>
@import url('./css.less');
</style>